<script type="text/javascript" src="./resources/js/jquery-3.4.1.min.js"></script>
<style>
    div.searchDiv{
        background-color: #C40000;
        width: 300px;
        border-radius: 30px;
        display: inline-block;
    }
    div.searchDiv input{
        font-family: 新宋体;
        border-radius: 30px;
        text-indent: 5px;
        font-size: 25px;
        width: 225px;
        border: 1px solid transparent;
        margin: 1px 1px 1px 1px;
        outline:none;

    }
    div.searchDiv button{
        border-radius: 30px;
        font-family: 楷体;
        width: 60px;
        border: 1px solid transparent;
        background-color: #C40000;
        color: white;
        /* 	font-weight:bold */
    }




    a:hover{
        text-decoration:none;
        color: #C40000;
    }

</style>
<script>
    $(document).ready(function () {
        console.log("页面载入search时！");
        console.log("window.location.pathname:"+window.location.pathname);
    });

    function searchButton() {
        var searchName = $('#searchName').val();
        window.location.href="./spotList.jsp?searchName="+searchName;
    }
</script>
<div class="container">
    <div class="row">
        <div class="span6">
            <ul class="nav nav-pills" style="font-size: 25px;height: 6%;">
                <li id="indexLi" class="active"><a href="./index.jsp" >主页</a></li>
                <li id="spotLi"><a href="./spotList.jsp">景点</a></li>
                <li><a href="./routesList.jsp">旅游线路</a></li>

                <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">推荐榜<b class="caret bottom-up"></b></a>
                    <ul class="dropdown-menu bottom-up pull-right">
                        <li><a href="./spotDetail.jsp?spotId=1">三坊七巷</a></li>
                        <li><a href="./spotDetail.jsp?spotId=7">福州云顶</a></li>
                        <li><a href="./spotDetail.jsp?spotId=3">福州西湖公园</a></li>
                    </ul>
                </li>

                <li class="pull-right" >
                    <div class="searchDiv" style="margin-top:10px;">
                        <input type="text" id="searchName" placeholder="三坊七巷 西湖公园" name="keyword">
                        <button class="searchButton" type="button" onclick="searchButton()">搜索</button>
                    </div>
<!--                    <div class="searchDiv" style="background-color: black;height: auto;" >-->
<!--                        <input type="text" id="searchName" placeholder="三坊七巷 西湖公园" name="keyword">-->
<!--                        <button class="searchButton" type="button" onclick="searchButton()">搜索</button>-->
<!--                    </div>-->
                </li>

                <li style="clear: both;"></li>
            </ul>
        </div>
    </div>
</div>
<div style="clear: both;"></div>